<template>
    <div class="modal-backdrop" v-if="show" @click.self="close">
        <div class="modal-content-box">
            <div class="modal-header">
                <h5 class="modal-title">{{ title }}</h5>
                <button type="button" class="btn-close" @click="close"></button>
            </div>
            <div class="modal-body">
                <slot />
            </div>
            <div class="modal-footer">
                <slot name="footer" />
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: String,
    show: Boolean
});

const emit = defineEmits(['update:show']);

const close = () => {
    emit('update:show', false);
};
</script>

<style scoped>
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-content-box {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 0.75rem;
    width: 100%;
    /* 1. 修改为响应式宽度 */
    max-width: min(90vw, 800px);
    padding: 1.5rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

/* 2. 添加平板/PC端适配 */
@media (min-width: 768px) {
    .modal-content-box {
        padding: 2rem;
        border-radius: 1rem;
    }
}

/* 3. 修复移动端小屏幕适配 */
@media (max-width: 480px) {
    .modal-content-box {
        padding: 1rem;
        margin: 0 0.5rem;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    margin-top: 1rem;
}
</style>
